<template>
  <div class="app-container hor-layout">
    <add-user-excel class="left-content" @tableData="getTableData"></add-user-excel>
    <div class="ver-layout content-container">
      <!--  分组信息   -->
      <el-card :body-style="topBodyStyle">
        <el-form label-width="90px" inline>
          <el-form-item required label="男生组数">
            <el-input-number class="input-view" size="small" type="number" :min="0"
                             :disabled="true" v-model="male"></el-input-number>
          </el-form-item>
          <el-form-item required label="女生组数">
            <el-input-number class="input-view" size="small" type="number" :min="0"
                             :disabled="true" v-model="female"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="!canStartRandom" @click="startRandom" type="primary" size="mini">
              开始随机分组
            </el-button>
            <el-button :disabled="!canExport" type="primary" size="mini" @click="exportExcel">{{ getExportText }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-scrollbar class="content-layout">
        <!--  分组   -->
        <div class="hor-layout-side" style="width: 100%;height: 400px;margin-top: 10px">
          <div class="hor-layout" style="width: 50%;flex-wrap: wrap;">
            <div class="ver-layout-center" style="margin:10px auto;"
                 v-for="item in parseInt(male)" :key="item.id">
              <el-table :data="getMaleList(item)" stripe border size="small" max-height="350px">
                <el-table-column :label="'男生组'+ item " align="center" label-class-name="label-class1">
                  <el-table-column type="index" label="#" :width="getIndexWidth" align="center"></el-table-column>
                  <el-table-column label="姓名" :prop="'男生组'+ item" :width="getTableWidth"
                                   align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div style="height: 100%;width: 1px;background: lightgrey"></div>
          <div class="hor-layout" style="width: 50%;flex-wrap: wrap;">
            <div class="ver-layout-center" style="margin:10px auto"
                 v-for="item in parseInt(female)" :key="item.id">
              <el-table :data="getFemaleList(item)" stripe border size="small" max-height="350px">
                <el-table-column :label="'女生组'+ item " align="center" label-class-name="label-class2">
                  <el-table-column type="index" label="#" :width="getIndexWidth" align="center"></el-table-column>
                  <el-table-column label="姓名" :prop="'女生组'+ item" :width="getTableWidth"
                                   align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import AddUserExcel from "@/components/add-user-excel/add-user-excel.vue"
import {export_json_to_excel} from "@/utils/Export2Excel"

export default {
  components: {AddUserExcel},
  data() {
    return {
      tableData: [],
      male: 2,
      female: "2",
      maleList: [],
      femaleList: [],
      topBodyStyle: {
        height: '30px',
        marginTop: "-10px"
      },
      startFlag: false,
      userTableData: [],
      userTableDataCache: []
    }
  },
  computed: {
    canStartRandom() {
      return this.tableData.length > 0 && !this.startFlag
    },
    canExport() {
      return this.userTableData.length > 0
    },
    getExportText() {
      return document.body.clientWidth > 500 ? "导出Excel" : "导出xls"
    },
    getIndexWidth() {
      return document.body.clientWidth > 500 ? "" : 30
    },
    getTableWidth() {
      return document.body.clientWidth > 500 ? "" : 60
    }
  },
  mounted() {
    let userTableDataStr = localStorage.getItem("userTableData") || "[]"
    this.userTableDataCache = JSON.parse(userTableDataStr)
    let userTableFieldObj = {}
    this.userTableDataCache.forEach((tableItem) => Object.keys(tableItem).forEach(key => userTableFieldObj[key] = key))
    this.male = Object.keys(userTableFieldObj).filter(key => key.includes("男生组")).length
    this.female = Object.keys(userTableFieldObj).filter(key => key.includes("女生组")).length
  },
  methods: {
    exportExcel() {
      let userTableFieldObj = {}
      this.userTableData.forEach((tableItem) => Object.keys(tableItem).forEach(key => userTableFieldObj[key] = key))
      let userTableData = [userTableFieldObj, ...this.userTableData]
      export_json_to_excel(userTableData, "随机分班结果")
    },
    getMaleList(index) {
      let list = this.userTableData.filter(item => Object.keys(item).includes("男生组" + index))
      console.log("getMaleList", list)
      return list
    },
    getFemaleList(index) {
      let list = this.userTableData.filter(item => Object.keys(item).includes("女生组" + index))
      console.log("getFemaleList", list)
      return list
    },
    getTableData(data) {
      console.log("getTableData", data)
      this.tableData = data
    },
    startRandom() {
      const loading = this.$loading({
        lock: true,
        text: '随机分配中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close()
        this.$message.success("分组完成！")
        let userTableDataStr = localStorage.getItem("userTableData") || "[]"
        this.userTableData = JSON.parse(userTableDataStr)
        this.startFlag = true
      }, 3 * 1000)
    }
  }
}
</script>

<style>
.app-container {
  width: 100%;
  padding: 10px;
  overflow: hidden;
  height: calc(100vh - 40px - 20px - 30px);
}

.left-content {
  width: 25%;
  height: 100%;
}

.content-container {
  margin-left: 10px;
  width: 75%;
  height: 100%;
}

.content-layout {
  flex: 1;
  margin-top: 5px;
  padding: 5px;
  box-shadow: 0 2px 12px 0 lightgrey;
  border: 1px solid #EBEEF5;
  border-radius: 4px
}

.label-class1 {
  font-weight: bolder;
  color: #409EFF;
  background: #ecf5ff !important;
}

.label-class2 {
  font-weight: bolder;
  color: #f56c6c;
  background: #fef0f0 !important;
}

.input-view {
  width: 120px;
}

@media screen and (max-width: 500px) {
  .input-view {
    width: 100px;
  }

  .content-container {
    margin-left: 4px;
    width: 60%;
    height: 90vh;
  }

  /deep/ .el-table__empty-text {
    width: fit-content;
  }

  /deep/ .el-card__body {
    padding: 5px;
  }
}
</style>
